<template>
	<view class="content">
		<view class="rent_type">
			<view class="rent_left">
				<view class="item">
					出租方式
				</view>
			</view>
			<view v-for="(item,index ) in rentType" :key="index" :class="form.rentType==item.value?'active':''"
				class="rent_right" @click="rentBtn(index)">
				<view class=" item">
					{{item.text}}
				</view>
			</view>
		</view>
		<view class="basic_information">
			<view class="roominfo">
				基本信息
			</view>
			<view class="area" @click="openPopup('region')">
				<view class="content_item">所在区域</view>
				<text class="picker_text">
					<text>{{form.region || '请选择'}}</text>
					<image src="/static/images/路径.png" mode="aspectFill"></image>
				</text>
			</view>
			<view class="banner" @click="openPopup('sector')">
				<view class="content_item">所在板块</view>
				<text class="picker_text">
					<text>{{form.sector || '请选择'}}</text>
					<image src="/static/images/路径.png" mode="aspectFill"></image>
				</text>
			</view>
			<view class="community">
				<view class="housing_item">
					小区
				</view>
				<input v-model="form.addr" placeholder="请输入" />
			</view>
			<view class="type" @click="openPopup('houseType')">
				<view class="content_item">户型</view>
				<text class="picker_text">
					<text>{{houseType || '请选择'}}</text>
					<image src="/static/images/路径.png" mode="aspectFill"></image>
				</text>
			</view>
			<view class="kind" @click="openPopup('type')">
				<view class="picker_item">
					<view class="content_item">类型</view>
					<text class="picker_text">
						<text>{{getText('type') || '请选择'}}</text>
						<image src="/static/images/路径.png" mode="aspectFill"></image>
					</text>
				</view>
			</view>
			<view class="monthly_rent">
				<view class="content_item">月租金</view>
				<view class="picker_text">
					<input v-model="form.rent" class="input" type="digit"></input>
					<text>月/元</text>
				</view>
			</view>
			<view class="payment_methods" @click="openPopup('payType')">
				<view class="content_item">付款方式</view>
				<text class="picker_text">
					<text>{{getText('payType')}}</text>
					<image src="/static/images/路径.png" mode="aspectFill"></image>
				</text>
			</view>
			<view class="floor" @click="openPopup('floor')">
				<view class="content_item">楼层</view>
				<text class="picker_text">
					<text>{{form.floor ? form.floor + '层' : '请选择'}}</text>
					<image src="/static/images/路径.png" mode="aspectFill"></image>
				</text>
			</view>
			<view class="lift">
				<view class="content_item">电梯</view>
				<view class="picker_text">
					<up-radio-group v-model="form.elevator">
						<up-radio v-for="(item, index) in elevator" :key="index" :label="item.text" :name="item.value">
						</up-radio>
					</up-radio-group>
				</view>
			</view>
		</view>
		<view class="telephone">
			<view class="phone">
				<view class="title">
					手机号(必填)
				</view>
				<input v-model="form.userPhone" type="tel" placeholder="请输入" />
			</view>
		</view>
		<view class="housing_lntroduction">
			<view class="housing_item">
				房源介绍
			</view>
			<textarea v-model="form.introduce" placeholder="请输入" />
		</view>
		<view class="rooms_pic">
			<view class="pic">
				<view class="pic_item">
					房屋照片
				</view>
				<view class="number">
					可添加9多张
				</view>
			</view>
			<view class="list-image">
				<view v-for="(item,index) in fileList" :key="item.url" class="pic-image">
					<image class="image" :src="item.url"></image>
					<image class="del" src="/static/images/增加 1.png" @click="fileDelete(index)"></image>
				</view>
				<view class="loading_pic" @click="uploadImage" v-if="fileList.length<9">
					<image src="/static/images/image 105.png" mode="aspectFit"></image>
					<view class="load">
						上传
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<u-button @click="handleSave" type="primary" text='保存'></u-button>
			<u-safe-bottom></u-safe-bottom>
		</view>
		<u-popup :show='popupShow.region' type="bottom" :z-index="9999" @close='closePopup("region")'>
			<view class="popup-content">
				<view class="row">
					<view class="row_item">关注区域</view>
					<view class="option" v-for="(area, index) in areaList" @click="handleSetValue('region',area)" :key="index">
						<view class="option-text">{{ area }}</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show='popupShow.sector' type="bottom" :z-index="9999" @close='closePopup("sector")'>
			<view class="popup-content">
				<view class="row">
					<view class="row_item">所在版块</view>
					<view class="scroll-view">
						<scroll-view :scroll-y="true" style="height:100%">
							<view class="option" v-for="(banner, index) in bannerList" @click="handleSetValue('sector',banner)"
								:key="index">
								<view class="option-text">{{ banner }}</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show='popupShow.houseType' type="bottom" :z-index="9999" @close='closePopup("houseType")'>
			<view class="popup-btn-wrap">
				<up-button :customStyle='{borderRadius:0}' @click="closePopup('houseType')" text="取消"></up-button>
				<up-button type="primary" text="确定" @click='handleHouseType' :customStyle='{borderRadius:0}'></up-button>
			</view>
			<view class="type-picker-container">
				<picker-view :value="pickerValue1" @change="pickerChange">
					<picker-view-column>
						<view v-for="(room, index) in roomList" :key="index">{{ room }}</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(hall, index) in hallList" :key="index">{{ hall }}</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(bathroom, index) in bathroomList" :key="index">{{ bathroom }}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</u-popup>
		<u-popup :show='popupShow.type' type="bottom" :z-index="9999" @close='closePopup("type")'>
			<view class="popup-content">
				<view class="row">
					<view class="row_item">类型</view>
					<view class="scroll-view">
						<scroll-view :scroll-y="true" style="height:100%">
							<view class="option" v-for="(banner, index) in rangeKind" @click="handleSetValue('type',banner.value)"
								:key="index">
								<view class="option-text">{{ banner.text }}</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="popupShow.floor" type="bottom" :z-index="9999" @close='closePopup("floor")'>
			<view class="popup-content">
				<view class="row">
					<view class="row_item">楼层</view>
					<view class="scroll-view">
						<scroll-view :scroll-y="true" style="height:100%">
							<view class="option" v-for="(banner, index) in floorRange" @click="handleSetValue('floor',banner.value)"
								:key="index">
								<view class="option-text">{{ banner.text }}</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="popupShow.payType" type="bottom" :z-index="9999" @close='closePopup("payType")'>
			<view class="popup-content">
				<view class="row">
					<view class="row_item">支付方式</view>
					<view class="scroll-view">
						<scroll-view :scroll-y="true" style="height:100%">
							<view class="option" v-for="(banner, index) in rangePayment"
								@click="handleSetValue('payType',banner.value)" :key="index">
								<view class="option-text">{{ banner.text }}</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import {
		baseUrl,
		uploadImagePromise
	} from "@/utils/request.js"
	import {
		toast
	} from "@/utils/common.js"
	import {
		saveHouse
	} from "@/api/room.js"
	import {
		test
	} from '@/uni_modules/uview-plus';
	import {
		computed,
		reactive,
		ref
	} from "vue"
	const rentType = ref([{
		text: '隔断房',
		value: 'PARTITION'
	}, {
		text: '转租',
		value: 'SUBLEASE'
	}, {
		text: '整租',
		value: 'WHOLE_RENTAL'
	}, {
		text: '合租',
		value: 'COTENANCY'
	}])
	const rentIndex = ref(0)
	const kindvalue = ref(0)
	const typeRef = ref(null)
	const floorRef = ref(null)
	const popupRef = ref(null);
	const paymentRef = ref(null);
	const areaList = ref(['不限', '花果园区'])
	const bannerList = ref([
		'不限',
		"A区",
		"B区",
		"C区",
		"D区",
		"E区",
		"F区",
		"G区",
		"H区",
		"I区",
		"J区",
		"K区",
		"L区",
		"M区",
		"N区",
		"O区",
		"P区",
		"Q区",
		"R区",
		"S区",
		"T区",
		"U区",
		"V区",
		"W区",
		"X区",
		"Y区",
		"Z区"
	])
	const elevator = ref([{
			text: "有",
			value: 'YES'
		},
		{
			text: "无",
			value: "NO"
		}
	])
	const roomList = ref(['一室', '二室', '三室', '四室', '五室', '六室', '七室', '八室', '九室']);
	const hallList = ref(['一厅', '二厅', '三厅', '四厅', '五厅', '六厅', '七厅', '八厅', '九厅']);
	const bathroomList = ref(['一卫', '二卫', '三卫', '四卫']);
	const pickerValue = ref([1, 1, 1]); // 默认选中二室、二厅、二卫
	const pickerValue1 = ref([1, 1, 1])
	const pickerChange = (e) => {
		pickerValue1.value = e.detail.value
	}
	const handleHouseType = () => {
		pickerValue.value = pickerValue1.value
		closePopup('houseType')
	}
	const houseType = computed(() => {
		let text = pickerValue.value.reduce((prev, item, index) => {
			if (index == 0) {
				prev.push(roomList.value[item])
			} else if (index == 1) {
				prev.push(hallList.value[item])
			} else if (index == 2) {
				prev.push(bathroomList.value[item])
			}
			return prev
		}, [])
		return text.join("")
	})

	const floorRange = ref([...Array(50)].map((item, index) => {
		return {
			text: (index + 1) + '层',
			value: index + 1
		}
	}))
	const rangeKind = ref([{
		text: '写字楼',
		value: 'OFFICE'
	}, {
		text: '临地铁',
		value: 'NEAR_SUBWAY'
	}, {
		text: '整租',
		value: 'WHOLE_RENTAL'
	}, {
		text: '合租',
		value: 'COTENANCY'
	}])
	const rangePayment = ref([{
		text: '付1押1',
		value: "PAY_ONE"
	}, {
		text: '付3押1',
		value: "PAY_THREE"
	}, {
		text: '半年付',
		value: "PAY_SIX"
	}, {
		text: '年付',
		value: "PAY_ANNUAL"
	}])
	const popupShow = reactive({
		region: false, //区域
		sector: false, //版块
		houseType: false, //户型
		type: false,
		floor: false,
		payType: false
	})
	const form = ref({
		"userId": "1",
		"images": "",
		"userPhone": "",
		"rentType": "PARTITION",
		"region": "",
		"sector": "",
		"addr": "",
		"houseType": "",
		"type": "",
		"rent": '',
		"payType": "",
		"floor": '',
		"elevator": "YES",
		"introduce": "",
		"adminRelease": '0'
	})
	const fileList = computed(() => {
		console.log(form.value.images.split(",").map(url => {
			return {
				url
			}
		}))
		return form.value.images ? form.value.images.split(",").map(url => {
			return {
				url
			}
		}) : []

	})
	const rentBtn = (index) => {
		form.value.rentType = rentType.value[index].value
	}
	const openPopup = (field) => {
		popupShow[field] = true
		console.log(popupShow, field)
	}
	const closePopup = (field) => {
		popupShow[field] = false
		console.log(popupShow, field)
	}
	const handleSetValue = (field, value) => {
		closePopup(field)
		form.value[field] = value
	}
	const getText = (field) => {
		if (field == 'payType') {
			let item = rangePayment.value.find(item => item.value == form.value.payType)
			if (item) {
				return item.text
			}
		} else if (field == 'type') {
			let item = rangeKind.value.find(item => item.value == form.value.type)
			if (item) {
				return item.text
			}
		}

		return "请选择"
	}
	const uploadImage = async () => {
		uni.chooseImage({
			count: 9,
			sizeType: ['compressed'],
			sourceType: ['album'],
			success: async (res) => {
				console.log(res, "res")
				for (let i = 0; i < res.tempFilePaths.length; i++) {
					let url = await uploadImagePromise(res.tempFilePaths[i])
					form.value.images = form.value.images ? form.value.images + ',' + url : url
				}

			}
		})
	}
	const fileDelete = (index) => {
		let images = form.value.images.split(",")
		images.splice(index, 1)
		form.value.images = images.join(",")
	}
	const handleSave = () => {

		if (!form.value?.userPhone) {
			toast("请输入手机号")
			return
		} else if (!test.mobile(form.value.userPhone)) {
			toast("手机号错误")
			return
		}
		uni.showLoading({
			title: "保存中...",
			mask: true
		})
        let formData = form.value
        formData.houseType = houseType.value
		saveHouse(form.value).then(res => {
			if (res.code == 200) {
				toast("保存成功")
				setTimeout(() => {
					uni.navigateBack()
				}, 2000)
			} else {
				toast("保存失败")
			}
		}).catch(() => {
			toast("保存失败")
		}).finally(() => {
			uni.hideLoading()
		})
	}
</script>

<style lang="scss" scoped>
	.active {
		background-color: rgba(79, 129, 240, 1);
		color: #fff;
		border-radius: 15rpx;
	}

	.content {
		width: 750rpx;
		height: 2054rpx;
		gap: 24rpx;
		padding: 32rpx 0 190rpx 0;
		background-color: rgba(247, 247, 247, 1);

		.rent_type {
			display: flex;
			// width: 622rpx;
			height: 54rpx;

			border-radius: 15rpx;
			padding: 32rpx;
			margin: 0 32rpx 24rpx 32rpx;
			gap: 24rpx;
			background-color: rgba(255, 255, 255, 1);

			.rent_left {
				width: 200rpx;
				height: 39rpx;

				.item {
					text-align: center;
					width: 148rpx;
					height: 39rpx;
					font-size: 34rpx;
					color: rgba(51, 51, 51, 1);
				}
			}

			.rent_right {
				display: flex;
				justify-content: space-between;
				width: 420rpx;
				height: 54rpx;
				gap: 24rpx;

				.revt_item {
					width: 52rpx;
					height: 44rpx;
					gap: 10rpx;
					font-size: 24rpx;
					color: rgba(51, 51, 51, 1);
					padding: 10rpx 14rpx;
					border-radius: 10rpx;
					background-color: rgba(230, 237, 246, 0.5);
				}

				.item {
					width: 72rpx;
					height: 44rpx;
					gap: 10rpx;
					font-size: 24rpx;
					color: rgba(51, 51, 51, 1);
					padding: 10rpx 14rpx;
					border-radius: 10rpx;
					background-color: rgba(230, 237, 246, 0.5);
				}
			}
		}

		.basic_information {
			width: 622rpx;
			height: 1038rpx;
			gap: 24rpx;
			padding: 32rpx;
			border-radius: 15rpx;
			margin: 0 32rpx 24rpx 32rpx;
			background-color: rgba(255, 255, 255, 1);

			.roominfo {
				width: 112rpx;
				height: 39rpx;
				font-size: 28rpx;
				font-weight: 600;
				margin-bottom: 24rpx;
			}

			.area {
				display: flex;
				justify-content: space-between;
				width: 622rpx;
				height: 39rpx;

				border-bottom: 1rpx solid rgba(225, 225, 225, 1);
				padding: 24rpx 0;
				margin-bottom: 24rpx;
				background-color: rgba(255, 255, 255, 1);

				.content_item {
					width: 112rpx;
					height: 39rpx;
					font-size: 28rpx;
				}

				.picker_text {
					display: flex;
					color: rgba(187, 187, 187, 1);

					text {
						width: 112rpx;
						height: 39rpx;
						font-size: 28rpx;
					}

					image {
						width: 13.97rpx;
						height: 25rpx;
						opacity: 50%;
						margin-left: 10rpx;
					}
				}
			}

			.banner {
				display: flex;
				justify-content: space-between;
				width: 622rpx;
				height: 39rpx;
				border-bottom: 1rpx solid rgba(225, 225, 225, 1);
				padding: 24rpx 0;
				margin-bottom: 24rpx;
				background-color: rgba(255, 255, 255, 1);

				.content_item {
					width: 112rpx;
					height: 39rpx;
					font-size: 28rpx;
				}

				.picker_text {
					display: flex;
					color: rgba(187, 187, 187, 1);

					text {
						width: 112rpx;
						height: 39rpx;
						font-size: 28rpx;
					}

					image {
						width: 13.97rpx;
						height: 25rpx;
						opacity: 50%;
						margin-left: 10rpx;
					}
				}
			}

			.community {
				display: flex;
				justify-content: space-between;
				width: 622rpx;
				height: 39rpx;
				font-size: 28rpx;
				border-bottom: 1rpx solid rgba(225, 225, 225, 1);
				padding: 24rpx 0;

				input {
					font-size: 28rpx;
					text-align: right;
					color: rgba(187, 187, 187, 1);
				}
			}

			.type {
				display: flex;
				justify-content: space-between;
				width: 622rpx;
				height: 39rpx;
				border-bottom: 1rpx solid rgba(225, 225, 225, 1);
				padding: 24rpx 0;
				margin-bottom: 24rpx;
				background-color: rgba(255, 255, 255, 1);

				.content_item {
					width: 112rpx;
					height: 39rpx;
					font-size: 28rpx;
				}

				.picker_text {
					display: flex;
					color: rgba(187, 187, 187, 1);

					text {
						width: 112rpx;
						height: 39rpx;
						font-size: 28rpx;
					}

					image {
						width: 13.97rpx;
						height: 25rpx;
						opacity: 50%;
						margin-left: 10rpx;
					}
				}
			}

			.kind {
				.picker_item {
					display: flex;
					justify-content: space-between;
					width: 622rpx;
					height: 39rpx;
					border-bottom: 1rpx solid rgba(225, 225, 225, 1);
					padding: 24rpx 0;
					margin-bottom: 24rpx;
					background-color: rgba(255, 255, 255, 1);
				}

				.content_item {
					width: 112rpx;
					height: 39rpx;
					font-size: 28rpx;
				}

				.picker_text {
					display: flex;
					color: rgba(187, 187, 187, 1);

					text {
						width: 112rpx;
						height: 39rpx;
						font-size: 28rpx;
					}

					image {
						width: 13.97rpx;
						height: 25rpx;
						opacity: 50%;
						margin-left: 10rpx;
					}
				}
			}

			.monthly_rent {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 622rpx;
				height: 39rpx;
				border-bottom: 1rpx solid rgba(225, 225, 225, 1);
				padding: 24rpx 0;
				margin-bottom: 24rpx;
				background-color: rgba(255, 255, 255, 1);
				font-size: 28rpx;

				.content_item {
					width: 112rpx;
					height: 39rpx;
				}

				.picker_text {
					color: rgba(51, 51, 51, 1);
					flex: 1;
					display: flex;
					overflow: hidden;

					.input {
						flex: 1;
						text-align: right;
					}
				}
			}

			.payment_methods {
				display: flex;
				justify-content: space-between;
				width: 622rpx;
				height: 39rpx;
				border-bottom: 1rpx solid rgba(225, 225, 225, 1);
				padding: 24rpx 0;
				margin-bottom: 24rpx;
				background-color: rgba(255, 255, 255, 1);

				.content_item {
					width: 112rpx;
					height: 39rpx;
					font-size: 28rpx;
				}

				.picker_text {
					display: flex;
					color: rgba(187, 187, 187, 1);

					text {
						width: 112rpx;
						height: 39rpx;
						font-size: 28rpx;
					}

					image {
						width: 13.97rpx;
						height: 25rpx;
						opacity: 50%;
						margin-left: 10rpx;
					}
				}
			}

			.floor {
				display: flex;
				justify-content: space-between;
				width: 622rpx;
				height: 39rpx;
				border-bottom: 1rpx solid rgba(225, 225, 225, 1);
				padding: 24rpx 0;
				margin-bottom: 24rpx;

				.content_item {
					width: 112rpx;
					height: 39rpx;
					font-size: 28rpx;
				}

				.picker_text {
					display: flex;
					justify-content: space-between;
					color: rgba(187, 187, 187, 1);

					text {
						width: 112rpx;
						height: 39rpx;
						font-size: 28rpx;
					}

					image {
						width: 13.97rpx;
						height: 25rpx;
						opacity: 50%;
						margin-left: 10rpx;
					}
				}
			}

			.lift {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 622rpx;
				height: 39rpx;
				border-bottom: 1rpx solid rgba(225, 225, 225, 1);
				padding: 24rpx 0;
				margin-bottom: 24rpx;
				background-color: rgba(255, 255, 255, 1);

				.content_item {
					width: 112rpx;
					height: 39rpx;
					font-size: 28rpx;
				}

				.picker_text {
					color: rgba(187, 187, 187, 1);
					font-size: 28rpx;
				}
			}
		}

		.popup-content {
			display: flex;
			flex-direction: column;
			width: 686rpx;
			height: 600rpx;
			gap: 40rpx;
			padding: 40rpx 32rpx 0rpx 32rpx;
			border-top-right-radius: 29rpx;
			border-top-left-radius: 29rpx;
			background-color: rgba(255, 255, 255, 1);

			.row {
				text-align: center;
				// width: 750rpx;
				display: flex;
				flex-direction: column;
				align-items: stretch;
				// height: 360rpx;
				height: 100%;
				// gap: 155rpx;
				font-size: 30rpx;

				.scroll-view {
					flex: 1;
					overflow: hidden;
				}

				.option {
					display: flex;
					align-items: center;
					justify-content: space-between;
					// width: 310rpx;
					height: 39rpx;
					padding: 25rpx 24rpx 25rpx 10rpx;

					.option-text {
						// width: 147rpx;
						padding-left: 20rpx;
						gap: 31rpx;
						border-left: 1rpx solid rgba(79, 129, 240, 1);
					}

					input {
						width: 23rpx;
						height: 20rpx;
						border: 1rpx solid rgba(0, 0, 0, 1);
					}
				}
			}


		}

		.telephone {
			width: 622rpx;
			height: 87rpx;
			gap: 24rpx;
			padding: 32rpx;
			border-radius: 15rpx;
			background-color: rgba(255, 255, 255, 1);
			margin: 0 32rpx 24rpx 32rpx;

			.phone {
				display: flex;
				justify-content: space-between;
				width: 622rpx;
				height: 39rpx;
				font-size: 28rpx;
				border-bottom: 1rpx solid rgba(225, 225, 225, 1);
				padding: 24rpx 0;

				input {
					font-size: 28rpx;
					text-align: right;
					color: rgba(187, 187, 187, 1);
				}
			}
		}

		.housing_lntroduction {
			width: 622rpx;
			height: 176rpx;
			gap: 24rpx;
			border-radius: 15rpx;
			padding: 32rpx;
			background-color: rgba(255, 255, 255, 1);
			margin: 0 32rpx 24rpx 32rpx;
			overflow: hidden;

			.housing_item {
				width: 112rpx;
				height: 39rpx;
				font-size: 28rpx;
				margin-bottom: 24rpx;
				color: rgba(51, 51, 51, 1);
			}
		}

		.rooms_pic {
			gap: 24rpx;
			padding: 32rpx;
			border-radius: 15rpx;
			background-color: rgba(255, 255, 255, 1);
			margin: 0 32rpx 24rpx 32rpx;

			.pic {
				display: flex;
				height: 39rpx;
				gap: 10rpx;
				margin: 0 32rpx 24rpx 32rpx;

				.pic_item {
                    width: 150rpx;
					height: 39rpx;
					font-size: 28rpx;
				}

				.number {
					height: 34rpx;
					opacity: 30%;
					font-size: 24rpx;
				}
			}

			.list-image {
				overflow: hidden;
				margin-left: -12rpx;
				margin-top: -12rpx;

				.pic-image {
					margin-left: 12rpx;
					margin-top: 12rpx;
					position: relative;
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
					float: left;
					overflow: hidden;

					.image {
						display: block;
						width: 100%;
						height: 100%;
					}

					.del {
						position: absolute;
						right: 0;
						top: 0;
						width: 38rpx;
						height: 38rpx;
						transform: rotateZ(45deg);
					}
				}


			}

			.loading_pic {
				margin-left: 12rpx;
				margin-top: 12rpx;
				float: left;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 200rpx;
				height: 200rpx;
				gap: 13rpx;
				border-radius: 10rpx;
				// padding: 38rpx 71rpx;
				// margin: 0 32rpx 24rpx 32rpx;
				background-color: rgba(230, 237, 246, 0.5);

				image {
					width: 77rpx;
					height: 77rpx;
					opacity: 20%;
				}

				.load {
					width: 52rpx;
					height: 36rpx;
					font-size: 26rpx;
					color: rgba(187, 187, 187, 1);
				}
			}
		}

		.type-picker-container {
			width: 686rpx;
			gap: 40rpx;
			padding: 40rpx 32rpx 60rpx 32rpx;
			border-top-right-radius: 29rpx;
			border-top-left-radius: 29rpx;
			background-color: rgba(255, 255, 255, 1);

			picker-view {
				display: flex;
				flex-direction: column;
				text-align: center;
				width: 750rpx;
				height: 370rpx;
				gap: 155rpx;
				font-size: 30rpx;
			}
		}

		.kind-picker-container {
			width: 686rpx;
			gap: 40rpx;
			padding: 40rpx 32rpx 60rpx 32rpx;
			border-top-right-radius: 29rpx;
			border-top-left-radius: 29rpx;
			background-color: rgba(255, 255, 255, 1);

			picker-view {
				display: flex;
				flex-direction: column;
				text-align: center;
				width: 750rpx;
				height: 370rpx;
				gap: 155rpx;
				font-size: 30rpx;

				picker-view-column {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					width: 66rpx;
					height: 330rpx;

					view {
						gap: 40rpx;
						text-align: center;
						font-size: 30rpx;
					}

				}
			}
		}

		.floor-picker-container {
			border-top-right-radius: 29rpx;
			border-top-left-radius: 29rpx;
			padding: 40rpx 32rpx 60rpx 32rpx;
			background-color: rgba(255, 255, 255, 1);

			picker-view {
				picker-view-column {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					width: 66rpx;
					height: 330rpx;

					view {
						gap: 40rpx;
						text-align: center;
						font-size: 30rpx;
					}
				}
			}
		}

		.payment-picker-container {
			width: 686rpx;
			gap: 40rpx;
			padding: 40rpx 32rpx 60rpx 32rpx;
			border-top-right-radius: 29rpx;
			border-top-left-radius: 29rpx;
			background-color: rgba(255, 255, 255, 1);

			picker-view {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				text-align: center;
				width: 750rpx;
				height: 370rpx;
				gap: 155rpx;
				font-size: 30rpx;
			}
		}
	}

	.popup-btn-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		padding: 20rpx;
	}
</style>